<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_定位之绝对定位</title>
    <style>
        .box{
            position: absolute;
            left: 100px;
            top: 500px;
        }
        .box1{
            height: 300px;
            width: 300px;
            background-color: teal;
        }
        .box2{
            height: 400px;
            width: 400px;
            background-color: orange;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>

<!--
    绝对定位：
        如何给元素进行绝对定位？
            1.给元素设置position属性值为absolute
            2.可以使用left、right、top、bottom属性进行定位，即可实现上下左右的定位
        绝对定位的参考点在哪里？
            参考他的包含块？
                什么是包含块？
                    1.对于没有脱离文档流的元素，包含块就是父元素。
                    2.对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素。（如果所有祖先都没有定位，那么包含块就是整个页面）
        绝对定位元素的特点：
            1.脱离文档流，会对父元素、后面的兄弟元素有影响。
            2.left、right一般不一起使用。top、bottom一般不一起使用。
            3.绝对定位、浮动不能一起使用，如果同时设置了浮动会失效，以定位为主。
            4.绝对定位的元素，也能通过margin调整位置，但是不推荐这样做。
            5.无论是什么元素（行内、行内快、块级）设置为绝对定位后，都变成了定位元素。
        何为定位元素？
            默认宽高都是内容撑开，且能自由的设置宽高。

-->
    <div class="box">
        <div class="box1">div1</div>
        <div class="box2">div2</div>
    </div>

</body>
</html>